课程卡片墙从二十三屏压到四屏，代价是补齐五个字段

接手这个项目是在 2025 年 3 月。客户是一家做特种作业和技能等级培训的机构，四个校区，一年营收三千多万。官网是 2022 年做的，网页制作前后花了两个月，交付时甲乙双方都挺满意——课程中心是一面标准的卡片墙，三列网格，每张卡 380 乘 420 像素，顶上一张 16 比 9 的缩略图，下面依次是课程名、学时、价格和一个「立即咨询」按钮。麻烦在于三年过去，课程从 20 门涨到了 68 门。

先看三个月的数据，再决定动不动它

甲方最初的说法是「课程中心不够好看，想重新设计一版」。我们先要了后台三个月的统计，看到的东西和好看不好看关系不大。

第一，课程中心页平均停留 2 分 10 秒，数字不低，但从这个页面走到咨询表单的转化只有 0.9%。停得久不等于看得投入，多数时候是找不到。

第二，点击热力图上 74% 的点击集中在前 9 张卡片，也就是第一屏到第二屏的范围。第 30 张往后的卡片，三个月累计点击不到 200 次，其中 12 门课一次都没被点开过，里面还夹着两门客单价最高的。

第三，站内搜索日均 40 次上下，62% 搜的是证书名称，比如「低压电工」「焊工复审」，而不是课程标题。这条最要命：用户脑子里的分类维度是证书，页面给出的组织维度是课程，两套维度对不上，卡片排得再整齐也是白排。

再补一个物理量。1440 宽的屏幕上三列卡片一屏放 6 张，68 门课要往下滚 23 屏，手机端一列排开更夸张。这个数字摆到会议桌上以后，重新设计一版的说法就没人再提了。

三个候选方案，吵得最久的是那张缩略图

方案列了三个。一是把卡片压小并去掉图，一屏从 6 张提到 15 张。二是改成紧凑行列表，左侧加筛选，行高 56 像素，一屏 12 行。三是做成按证书分组的纯文字目录，像一张目录页，一屏就能看完全部课程。

真正争执的不是版式，是缩略图要不要留。68 门课里只有 11 门有真实的实训场地照片，剩下 57 门用的是图库图：戴安全帽的男人、握着焊枪的手、笔记本电脑前微笑的人。设计侧的理由是卡片没图会很空，运营侧的理由是这些图客户根本不信。僵住之后做了个很土的验证——挑 12 张卡片，把图全部盖住只留文字，找 8 位咨询顾问看，问能不能分清这几门课，8 个人全部能分清。反过来盖住文字只留图，没有一个人答对超过 3 张。

这个结果基本定了调子。图片不承载区分度的时候，卡片就是在用 60% 以上的面积展示装饰物。网页制作里卡片之所以常常成为默认容器，很大程度是因为它在设计稿里最容易铺满、最容易显得完整，而不是因为它对用户最省力。

最后选的是拼起来的方案，成本落在字段上

三个方案一个都没有单选。课程中心首页做成分组目录，按 6 类证书分组，每组下面是课程名的文字链，一屏能看到 68 门课的全貌。点进任一分组，才是行列表加左侧筛选。卡片也没有全删，首页保留了 4 个「近期开班」位置，因为那 4 门课确实有真实照片，而且数量足够少。

成本大头不在版式。行列表要能筛，68 门课就得补齐 5 个结构化字段：证书类别、学时、开班频次、价格区间、适用工种。原先这些信息全塞在课程详情的一段富文本里，人能读，机器筛不了。内容侧两个人整理了 19 个工作日，中途还发现 7 门课的学时和线下招生简章对不上，回头核对又搭进去 4 天。

开发这边反倒轻松：行列表加筛选 6 个人日，分组目录 1.5 个人日，后台加 5 个字段并做批量录入界面 3 个人日，合计不到 11 人日。这类项目的账经常是这个形状——网页制作的工时是能写进报价单的那部分，看不见的那部分堆在客户自己的库房里，谁都没提前算过。

三个月后的数字，其中一项是变差的

上线满三个月做对比：课程中心到咨询表单的转化从 0.9% 升到 2.4%。站内搜索使用量下降 41%，因为要找的东西直接看得见了。此前三个月零点击的那 12 门课，有 9 门开始有稳定的详情页访问。

变差的是课程详情页的平均停留时间，从 1 分 48 秒掉到 1 分 20 秒。一开始以为内容出了问题，逐页排查后才想明白：用户到达详情页时目标已经明确，不再需要在页面上反复确认这门课是不是自己要的。停留时长这个指标在这次改版里从正向变成了中性，如果照旧口径考核，这次改版会被判成退步。这件事得在改版之前就跟甲方讲清楚，事后再解释像在找补。

还有一次实打实的返工。上线第一周移动端投诉集中：行列表在 375 像素宽下，课程名加三个字段挤在同一行里折成三行，比原来的卡片还难读。原因很直白，网页制作阶段验收看的是 1440 宽的稿子，行列表在宽屏上确实清爽。第二版把移动端改成两行式，第一行只放课程名，第二行放学时、价格、开班月份，用中点分隔，行高 72 像素。这一改又花了 2 个人日，而在设计阶段拉一版 375 宽的对照稿，半小时就能避免。

留下来的两条判断标准

第一条是数量线。同级条目在 12 条以内，卡片是舒服的，一屏看得完，视觉上也有节奏。12 到 30 条之间要看图片质量，图能区分内容就还撑得住。超过 30 条，卡片基本该退位，让给可扫描的行列表或分组目录——扫一行文字的速度大约是看一张卡片的三到四倍，这个差距放到 68 条的量级上，就是 19 屏的滚动差。

第二条是遮图测试。把所有缩略图盖住，如果用户仍然能准确区分这些条目，说明图是装饰不是信息，它占掉的那两百多像素高度就是纯损耗。反过来，盖住图之后真的分不清了——装修案例、婚纱摄影套系、家具款式都属于这一类——那卡片就是对的容器，不该动。这个测试放在网页制作动手之前做，成本是半小时加几个愿意配合的同事。

还有一处没动的地方值得记一笔：师资介绍页至今仍是卡片，12 个人，每人一张真实工作照，没有任何理由改。同一个官网里两种组织方式并存并不别扭，用户分得清自己什么时候在挑东西、什么时候在看人。真正让人分不清的，是把所有内容都塞进同一种容器里。